<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">订单</el-breadcrumb-item>
      <el-breadcrumb-item>退货原因设置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 按钮组 -->
    <span style="margin-top:15px">
        <el-button icon="el-icon-refresh" style="float: right"  @click="reload">刷新</el-button>
        <el-button style="float: right" @click="dialogFormVisible = true">添加</el-button>
    </span>

    <!-- 表格开始 -->
    <el-table :data="tableData" stripe style="width: 100%"  @selection-change="changeFun">>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="id" label="服务单号"></el-table-column>
      <el-table-column prop="cause" label="原因类型"></el-table-column>
      <el-table-column prop="seq" label="排序"></el-table-column>
      <el-table-column label="是否启用" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            @change="changeSwitchStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="添加时间" width="230">
          <template slot-scope="scope">
          {{scope.row.addTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteReason(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table> 
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 分页结束 -->

        <!--新增或修改对话框-->
    <el-dialog :title="refundReasonForm.id==null?'新增':'编辑'" :visible.sync="dialogFormVisible" @close="dialogClose">
      <el-form :model="refundReasonForm">
        <el-form-item label="原因类型" :label-width="formLabelWidth">
          <el-input v-model="refundReasonForm.cause" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="refundReasonForm.seq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-switch
            v-model="refundReasonForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; refundReasonForm={}">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  async created () {
    this.getReturnOrderList()
  },
  data () {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 页大小
      pageSizeList: [10, 20, 50, 100, 500], // 页大小列表
      total: 0, // 总记录数
      // 表单label的宽度
      formLabelWidth: '120px',
      // 退款订单的状态
      returnOrderStatus: [],
      // 复选框ids
      multipID:[],
      dialogFormVisible: false,
      refundReasonForm: {}
    }
  },
  methods: {
    // 查询列表
    async getReturnOrderList () {
      const { data: res } = await this.$http.get(`/orders/returnCause/findPage?page=${this.currentPage}&size=${this.pageSize}`)
      this.tableData = res.rows
      this.total = res.total
      console.log(res);
    },
    // 页大小改变事件
    handleSizeChange (val) {
      this.pageSize = val
      this.getReturnOrderList()
    },
    // 页码改变事件
    handleCurrentChange (val) {
      this.currentPage = val
      this.getReturnOrderList()
    },
    // 编辑
    async handleEdit (index, row) {
      const { data: res } = await this.$http.get(`/orders/returnCause/findById?id=${row.id}`)
      this.dialogFormVisible = true
      this.refundReasonForm = res
    },
    async add () {
        // 发请求
        const { data: res } = await this.$http.post(`/orders/returnCause/${this.refundReasonForm.id == null ? 'add' : 'update'}`, this.refundReasonForm)
        this.$message({
              type: res.code === 200 ? 'success' : 'error',
              message: res.message
        })
        this.dialogFormVisible = false
        this.getReturnOrderList()
    },
    // 删除
    deleteReason (index, row) {
      console.log(row);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$http.get(`/orders/returnCause/delete?id=${row.id}`)
          if (res.code !== 200) {
            this.$message.error('删除失败')
            return
          }
          this.$message.success('删除成功')
          this.getReturnOrderList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 对话框关闭
    dialogClose () {
      this.refundReasonForm = {}
    },
    // 查询
    onSubmit () {
      this.getReturnOrderList()
    },
    // 刷新
    reload () {
      window.location.reload()
    },
    // 复选框的值
    changeFun(row){
		  let _this=this
		  _this.multipID=[] //每次改动重置ID
      row.forEach((item)=>{
      _this.multipID.push(item.id)
      })
	  },
    // switch改变事件
    async changeSwitchStatus (row) {
      this.refundReasonForm = row
      this.add()
    }
  },
  created () {
    this.getReturnOrderList()
  }
}
</script>

<style scoped>

</style>>
